<template>
  <div class="login-box" :class="{ show: show }">
    <Login silent @login="$emit('login')" />
  </div>
</template>

<script>
import Login from '../../index.vue'

export default {
  components: { Login },
  data () {
    return {
      show: false
    }
  },
  created () {
    setTimeout(() => {
      this.show = true
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  transform: translateY(-150px);
  opacity: 0;
  transition: all 0.5s;
  &.show {
    transform: translateY(0px);
    opacity: 1;
  }
}
</style>
